<?php
    $this->layout('onboarding.phtml', [
        'title' => _('Read at your own pace'),
        'canonical' => url_full('onboarding', ['step' => 2]),
        'current_step' => 2,
    ]);
?>

<div class="section section--longbottom">
    <div class="section__title">
        <h1><?= _('Read at your own pace') ?></h1>
    </div>

    <p class="section__intro">
        <?= icon('reading') ?>
        <?= _('The <strong>Reading</strong> tab helps you organise your reading list.') ?>
    </p>

    <img
        class="illustration illustration--centered"
        alt="<?= _('The screenshot of the Reading menu. It shows three elements: News, Bookmarks and Links read.') ?>"
        src="<?= url_static('onboarding/reading_menu.' . get_current_locale() . '.webp') ?>"
    />

    <p class="paragraph--centered">
        <?= _('“News” gives you suggestions of what to read from the websites that you follow.') ?>
    </p>

    <p class="paragraph--centered">
        <?= _('Short on time? “Bookmark” links to read later and find them in one click.') ?>
    </p>

    <p class="paragraph--centered">
        <?= _('Finally, keep track of the links you have already read in the “Links read” section.') ?>
    </p>

    <p class="paragraph--centered">
        <a class="anchor--action" href="<?= url('onboarding', ['step' => 3]) ?>">
            <?= _('Continue') ?>
        </a>
    </p>
</div>
